<template>
  <div>
    <Nav/>
    <div class="bgimg">
      <img class="imgbg" src="@/assets/images/index/contentbg.png">
      <div class="contentbox">
        <div class="content1">
          <div class="titlebox">
            <div class="title">My Wallet</div>
          </div>

          <div v-if="isShow" class="content" style="padding: 25px 20px">
            <div class="conlist">
              <div class="title">
                ETH:
              </div>
              {{Number(account.status) === 1?float_format(account.eth):'...'}}
            </div>
            <div class="conlist">
              <div class="title">
                USDT:
              </div>
              {{Number(account.status) === 1?float_format(account.usdt):'...'}}
            </div>
            <hr/>
            <div class="conlist">
              <div class="title">
                Total Reward:
              </div>
              {{Number(account.status) === 1?float_format(wallet.eth_reward):'...'}}ETH
            </div>
            <div class="conlist">
              <div class="title">
                Exchangeable:
              </div>
              {{Number(account.status) === 1?float_format(wallet.eth):'...'}}ETH
            </div>
            <div class="conlist">
              <div class="title">
                Account Balance:
              </div>
              {{Number(account.status) === 1?float_format(wallet.usdt):'...'}}USDT
            </div>
          </div>
          <div v-else class="content">
            <LinkToken/>
            <div class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
          <div class="titlebox">
            <div class="title">Farming Rewards</div>
          </div>
          <div class="clock">
            <img src="@/assets/images/account/clock.png">
          </div>
          <div class="content">
            <div v-if="isShow">
              <div class="th">
                <div>Date</div>
                <div>
                  ETH Reward
                </div>
              </div>
              <div v-for="item in list" class="tr">
                <div>{{item.create_time}}</div>
                <div>{{float_format(item.now)}}</div>
              </div>
            </div>
            <div v-else class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
        </div>

      </div>
      <div class="flooter">
        Copyright © 2025
        <span class="span">Liquidity Farming</span>
      </div>
    </div>
    <Tabber :tab="tab"/>
  </div>
</template>
<script>
import GetToken from "@/components/getToken.vue";
import Nav from "@/components/nav.vue";
import {getRecord} from "@/api/user.js";
import {fix2} from "@/utils/fliters.js";
import {mapState} from 'vuex'
import {float_format} from "../../utils/fliters.js";

export default {
  data() {
    return {
      tab: 2,
      showBottom: false,
      next: false,
      list: [],
      page: 1,
      finish: false
    }
  },
  computed: {
    ...mapState('user',['isShow','token','account','wallet'])
  },
  components: {
    Nav,
    GetToken
  },
  mounted() {

  },
  watch:{
    'token' :{
      handler(val){
        if(val){
          this.getRecordlist()
        }
      },immediate:true
    }
  },
  methods: {
    float_format,
    fix2,
    getRecordlist() {
      getRecord().then(res => {
        this.list = res.list
      })
    },
    close() {
      this.showBottom = false
    },
    next1() {
      this.next = true;
    },
    first() {
      this.next = false;
    }
  }
}
</script>
<style scoped>
.content1 .titlebox {
  padding: 30px 0 35px 0 !important;
  position: relative;
}

.bgimg {
  position: relative;
}

.clock {
  position: relative;
}

.clock img {
  width: 91px;
  height: 91px;
  margin: 15px 5px;
}

.bgimg .imgbg {
  position: absolute;
  width: 100%;
  height: 35vh;
  top: 250px;
}

.contentbox {
  padding: 0 10px;
}

.titlebox {
  display: flex;
  align-items: center;
  padding: 10px 0 15px 5px;
  justify-content: center;
}

.titlebox .title {
  color: rgb(41 74 224);
  font-family: Josefin Sans, Serif;
  font-weight: 700;
  font-size: 25px;
}

.loginbox {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border: 1px solid transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(22 178 242 / var(--tw-bg-opacity));
  padding: 4px 6.5px;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  margin: 15px 5px 15px 5px;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

.img1box {
  text-align: center;
}

.img1box img {
  width: 104px;
  height: 137px;
}

.content1 .content {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  padding: 13px;
  border-radius: 32px;
  background: white;
  position: relative;
}

.loading {
  padding-top: 10px;
}

.loading .van-skeleton {
  padding: 0px;

}

.flooter {
  height: 48px;
  text-align: center;
  line-height: 48px;
  margin-top: 5px;
  padding-bottom: 50px;
  padding-top: 70px;
  background: white;
}

.flooter .span {
  color: rgb(41 74 224 / var(--tw-text-opacity));
}

.content .th {
  color: black;
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  padding: 5px;
}

.content .tr {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  min-height: 20px;
}

.content .conlist {
  font-size: 10px;
  display: flex;

  line-height: 22px;
}

.content .conlist .title {
  font-weight: 900;
  margin-right: 7px;
}
</style>
